<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-if和v-show都是在指令的值为真是显示元素，为假时隐藏元素 -->
        <!-- v-if初始化加载加快，切换消耗较大。适合不经常切换的场景 -->
        <!-- v-show初始化加载慢，切换消耗小，适合经常切换的场景 -->
        <button @click="isShow = !isShow">toggle</button>
        <div class="div1" v-show="isShow"></div>
        <br>
        <div class="div1" v-if="isShow"></div>
        <hr>
        <input type="text" v-model="age">
        <p v-if="age < 18">未成年人</p>
        <p v-else-if="age >=18 && age < 50">社畜</p>
        <p v-else-if="age >=50 && age < 60">坐等退休</p>
        <p v-else-if="age >=60 && age < 90">坐休</p>
        <p v-else>墙上挂画</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isShow: false,
                age: 18
            }
        })
    </script>
</body>
</html>